<template>
    <div class='classify'>
        <div class="container">
            <el-row :gutter="10" class="mb8">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight :height="tableList.length > 0 ? '900px' : '120px'">
                <el-table-column label="排序" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" @keyup.native="scope.row.sort=handleNum(scope.row.sort)" @blur="sortTab(scope.row)" clearable size="small" />
                    </template>
                </el-table-column>
                <el-table-column label="编号" align="center" prop="id" />
                <el-table-column label="封面" align="center" prop="logo">
                    <template slot-scope="scope">
                        <div v-if="scope.row.logo" class="img-list">
                            <el-image style="width: auto; height: 50px;" :src="scope.row.logo" :preview-src-list="[scope.row.logo]">
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="分类名称" align="center" prop="name" />

                <!-- <el-table-column label="级别" align="center" prop="amount" /> -->
                <!-- <el-table-column label="服务数量" align="center" prop="pay_way" />
                <el-table-column label="数量单位" align="center" prop="source" />
                <el-table-column label="排序" align="center" prop="source" /> -->
                <el-table-column label="是否首页显示" align="center" prop="is_home">
                    <template slot-scope="scope">
                        <span>
                            {{selectDictLabel(statusList1, scope.row.is_home)}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <span>
                            {{ selectDictLabel(statusList, scope.row.status) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" v-hasPermi="['basic:nursing:edit']">
                            抽成比例
                        </el-button>
                        <el-button v-if="scope.row.is_home==0" size="mini" type="text" @click="handleSet(scope.row)" v-hasPermi="['user:staff:stop']">设置首页显示
                        </el-button>
                        <el-button v-if="scope.row.status == 0" size="mini" type="text" @click="handleAble(scope.row)" v-hasPermi="['disabled:service:start']">停用
                        </el-button>
                        <el-button v-if="scope.row.status == 1" size="mini" type="text" @click="handleAble(scope.row)" v-hasPermi="['disabled:service:start']">启用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> -->
            <el-dialog :title="title" visible v-if="handleShow" @close="close()" width="80%" append-to-body :close-on-click-modal="false">
                <el-form ref="form" :model="form" :rules="rules" label-width="180px" v-loading="formLoading">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="服务分类名称：" prop="name">
                                <span>{{ form.name }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="蔚蓝抽成比例：" prop="weilan_take_rata">
                                <span>{{ form.weilan_take_rata }}%</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="加盟商抽成比例：" prop="busin_rata">
                                <el-input style="width:260px;" v-model="form.busin_rata" @keyup.native="form.busin_rata=onInput(form.busin_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="一级大团长抽成比例：" prop="one_tc_rata">
                                <el-input style="width:200px;" v-model="form.one_tc_rata" @keyup.native="form.one_tc_rata=onInput(form.one_tc_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1">
                            <el-form-item label="二级大团长抽成比例：" prop="two_tc_rata">
                                <el-input style="width:200px;" v-model="form.two_tc_rata" @keyup.native="form.two_tc_rata=onInput(form.two_tc_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="一级团长抽成比例：" prop="one_gl_rata">
                                <el-input style="width:200px;" v-model="form.one_gl_rata" @keyup.native="form.one_gl_rata=onInput(form.one_gl_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1">
                            <el-form-item label="二级团长抽成比例：" prop="two_gl_rata">
                                <el-input style="width:200px;" v-model="form.two_gl_rata" @keyup.native="form.two_gl_rata=onInput(form.two_gl_rata)"
                                    placeholder="请输入">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">%</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close()">取 消</el-button>
                    <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getCateLists, setCateStatus, setCateInfo, getCateInfo, setCateHome, setSort } from "@/api/service/service.js"
import { departStatus, yesNo } from "@/api/dictionary"
import throttle from 'lodash.throttle'
export default {
    name: 'classify',
    components: {

    },
    data() {
        const isRange = (rule, value, callback) => {
            if (value < 0 || value > 100) {
                return callback(new Error('输入数字需要在0~100之间'))
            } else {
                callback()
            }
        }
        return {
            showSearch: true,
            loading: false,
            pageCount: 0,
            total: 0,
            queryParams: {},
            tableList: [{}],
            statusList: departStatus,
            statusList1: yesNo,
            handleShow: '',
            form: {},
            rules: {
                busin_rata: [{ required: true, message: "请输入", trigger: "blur" }, { validator: isRange, trigger: 'blur' }],
                one_tc_rata: [{ required: true, message: "请输入", trigger: "blur" }, { validator: isRange, trigger: 'blur' }],
                two_tc_rata: [{ required: true, message: "请输入", trigger: "blur" }, { validator: isRange, trigger: 'blur' }],
                one_gl_rata: [{ required: true, message: "请输入", trigger: "blur" }, { validator: isRange, trigger: 'blur' }],
                two_gl_rata: [{ required: true, message: "请输入", trigger: "blur" }, { validator: isRange, trigger: 'blur' }],
                // cate_id: [{ required: true, message: '请输入服务分类', trigger: 'blur' }],
                // member_price: [{ required: true, message: '请输入会员价格', trigger: 'blur' }],
                // current_price: [{ required: true, message: '请输入普通价格', trigger: 'blur' }],
                // content: [{ required: true, message: '请输入服务介绍', trigger: 'blur' }],
                // thumbs: [{ required: true, message: '请上传缩略图', trigger: 'change' }],
            },
            formLoading: false,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true;
            getCateLists().then(res => {
                this.tableList = res.data;
                // this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleEdit(row) {
            // this.form=JSON.parse(JSON.stringify(scope.row));
            this.handleShow = 'edit';
            this.title = '编辑抽成比例';
            this.form.name = row.name
            getCateInfo({ cate_id: row.id }).then(res => {
                this.form = { ...this.form, ...res.data }
                this.$set(this.form, "busin_rata", res.data.busin_take_rata)
                this.$set(this.form, "one_gl_rata", res.data.one_gl_take_rata)
                this.$set(this.form, "one_tc_rata", res.data.one_tc_take_rata)
                this.$set(this.form, "two_gl_rata", res.data.two_gl_take_rata)
                this.$set(this.form, "two_tc_rata", res.data.two_tc_take_rata)
                // this.$set(this.form, "busin_rata", res.data.busin_take_rata)
                // this.form.busin_rata = res.data.busin_take_rata
                // this.form.one_gl_rata = res.data.one_gl_take_rata
                // this.form.one_tc_rata = res.data.one_tc_take_rata
                // this.form.two_gl_rata = res.data.two_gl_take_rata
                // this.form.two_tc_rata = res.data.two_tc_take_rata
            })
        },
        handleAble(row) {
            let label = row.status == 0 ? '停用' : '启用';
            this.$confirm(`是否将“${row.name}”${label}?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return setCateStatus({ cate_id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess(`${label}成功`);
            })
        },
        close() {
            this.form = {}
            this.handleShow = ""
        },
        handleSet(row) {
            let label = row.is_home == 0 ? '设置' : '取消';
            this.$confirm(`是否将“${row.name}”${label}首页显示?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return setCateHome({ cate_id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess(`${label}成功`);
            })
        },

        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    this.form.cate_id = this.form.id
                    setCateInfo(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.getList();
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),

        handleDelete(row) {
            this.$confirm('是否确认删除' + '"' + row.name + '"' + '?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delService({ service_id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            })
        },
        sortTab(row) {
            console.log(row, 123)
            setSort({
                sort: row.sort,
                cate_id: row.id
            }).then(res => {
                if (res.code == 1) {
                    this.msgSuccess("操作成功");
                    this.getList()
                }
            })
        }
    },
}

</script>
<style scoped lang='scss'>
/deep/.top-right-btn {
    button:nth-child(1) {
        display: none;
    }
}
</style>